<template>
<div class="cus_dialog_container animate__animated animate__fadeIn" v-if="display" @click="maskClick" :style="{backgroundColor:maskColor}">
    <div :class="['dialog_content animate__animated',animateOn?('animate__'+animateInType):'']" @click.stop="stop" :style="{backgroundColor:contentBackgroundColor}">
        <div class="title_dialog" v-if="title">{{title}}</div>
        <slot></slot>
        <!-- <a-button :class="title?'title_close':'close_button'" type="text" preIcon="ant-design:close-outlined" @click="animateClose" v-if="showCloseButton"></a-button> -->
        <el-button :class="title?'title_close':'close_button'" type="text" size="default" icon="el-icon-close" @click="animateClose" v-if="showCloseButton"></el-button>
        
    </div>
</div>
</template>

<script>
export default {
    props: {
        visible: {//是否可见，双向绑定
            type: Boolean,
            default: false,
        },
        title: {//标题
            type: String,
            default: "",
        },
        closeOnClickModal: {//是否点击背景关闭
            type: Boolean,
            default: true,
        },
        showCloseButton: {//是否展示关闭按钮
            type: Boolean,
            default: true,
        },
        animateOn: {//是否开启动画
            type: Boolean,
            default: true,
        },
        animateInType: {//入场动画  animate.css
            type: String,
            default: "zoomIn",
        },
        animateOutType: {//退场动画  animate.css
            type: String,
            default: "zoomOut",
        },
        maskColor:{//遮罩层背景颜色
            type: String,
            default: "rgba(0, 0, 0, 0.5)",
        },
        contentBackgroundColor:{//内容背景颜色
            type: String,
            default: "#FFF",
        },
    },
    data() {
        return {
            display: false,
        }
    },
    created () {
        console.log("cusDialog初始化");
    },
    watch: {
        //从外部关闭是  用display缓冲一下，动画
        visible(newValue, oldValue) {
            if (newValue) {
                this.display = true;
            }else{
                this.animateClose();
            }
        }
    },

    methods: {
        //背景点击
        maskClick() {
            if (this.closeOnClickModal) {
                this.animateClose();
            }
        },
        //关闭组件
        animateClose() {
            //动画mask 
            this.helper.animateCSS(this.jq(".cus_dialog_container")[0], "fadeOut").then((message) => {
                this.display = false;
                this.$emit("update:visible", false);
                this.$emit("close");
            });
            //是否开启动画关闭 内容区域
            if (this.animateOn) {
                this.helper.animateCSS(this.jq(".dialog_content")[0], this.animateOutType);
            }

        },
        stop() {

        },

    },
}
</script>

<style lang="less" scoped>
.cus_dialog_container {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;

    .dialog_content {
        min-width: 400px;
        min-height: 200px;
        max-height: 96%;
        border-radius: 8px;
        position: relative;
        box-shadow: 0px 0px 10px#444;
        overflow-y: auto;
        overflow-x: hidden;

        .title_dialog{
            width: 100%;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 16px;
        }

        .close_button {
            z-index: 1000;
            position: absolute;
            top: 0px;
            right: 10px;
            font-size: 18px;
        }
        .title_close{
            z-index: 1000;
            position: absolute;
            top: 0px;
            right: 10px;
            font-size: 18px;
        }
    }

}

.animate__animated {
    --animate-duration: 0.5s;
}
</style>
